<template>
    <up-number-box v-model="innerValue" :min="min" :step="1" :max="max" @change="handleChange">
        <template #minus>
            <view
                class="minus"
                :class="innerValue > min ? 'active' : ''"
                :style="{ width: size, height: size }"
            >
                <up-icon
                    name="minus"
                    :color="innerValue > min ? '#da8c10' : '#999'"
                    size="12"
                    :bold="true"
                ></up-icon>
            </view>
        </template>
        <template #input>
            <text class="input center ft-30 t-3" :style="{ height: size }"
                >{{ innerValue }}{{ unit || '' }}</text
            >
        </template>
        <template #plus>
            <view
                class="plus"
                :class="innerValue < max ? 'active' : ''"
                :style="{ width: size, height: size }"
            >
                <up-icon
                    name="plus"
                    :color="innerValue < max ? '#da8c10' : '#999'"
                    size="12"
                    :bold="true"
                ></up-icon>
            </view>
        </template>
    </up-number-box>
</template>
<script setup>
/**
 * @description 入住数量选择弹窗
 * @author yinzhi
 * @date 2025-05
 * @param { Number } min 最小显示数量，默认1 最小数量控制减号样式
 * @param { Number } max 最大显示数量，默认10 最大数量控制加号样式
 * @param { Number | String } modelValue 双向绑定的值，默认1
 * @example <hj-number-box v-model="value" />
 */
import props from './props'
import { ref, watch, computed } from 'vue'
const prop = defineProps({
    ...props,
    modelValue: {
        type: [Number, String],
        default: 1
    }
})
const modelValue = computed(() => {
    return prop.modelValue
})
const min = computed(() => prop.min)
const max = computed(() => prop.max)
const unit = computed(() => prop.unit)
const size = computed(() => prop.size)
const emit = defineEmits(['update:modelValue', 'change'])

const innerValue = ref(modelValue.value)

// 监听内部值的变化，触发 update:modelValue 事件通知父组件
watch(innerValue, newValue => {
    emit('update:modelValue', newValue)
})

const handleChange = e => {
    emit('change', e)
}

// 监听父组件传入的 modelValue 变化，更新内部值
watch(
    () => modelValue.value,
    newValue => {
        innerValue.value = newValue
    },
    { deep: true }
)
</script>

<style scoped lang="scss">
.minus {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
    border: 1px solid #999;
}

.input {
    padding: 0 4rpx;
    width: 88rpx;
    height: 48rpx;
}

.plus {
    width: 48rpx;
    height: 48rpx;
    border: 1px solid #999;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
}
.active {
    border: 1px solid $uni-color-primary;
}
</style>
